<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>淡入淡出</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      float: left;
      margin-left: 5px;
    }

    .box {
      width: 425px;
      height: 105px;
      padding-top: 5px;
      border: 1px solid #ccc;
    }

    .red {
      background-color: red;
    }

    .green {
      background-color: green;
    }

    .yellow {
      background-color: yellow;
    }

    .orange {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="orange"></div>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    $('.box div').fadeTo(2000, 0.2);
    $('.box div').hover(function () {
      $(this).fadeTo(1, 1);
    }, function () {
      $(this).fadeTo(1, 0.2);
    });
  </script>
  <a href="../首页/page11.html">
    <h2>返回上一页面</h2>
  </a>
</body>

</html>